<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 陈鑫茹 2182688619@qq.com
 * @LastEditTime: 2025-09-28 08:54:10
-->
<template>
  <div class="right-content">
    <div ref="right1" style="width: 60%;height: 190px;border-radius: 10px; margin-left: auto; margin-top: 30px;position: absolute;bottom: 155px;left: 521px;">
    </div>
  </div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      columnData: [],
    };
  },
  computed: {},
  methods: {
    loadColumn() {
      const columnPlot = new Column(this.$refs.right1, {
        data: this.columnData,
        xField: 'type',
        yField: 'value',
        color: ({ type }) => {
                    if (type === '测试工程2') {
                        return '#DCECCB';
                    }

                    else if(type === '兰州理工大学'){
                        return '#FFD877';
                    }
                    else if(type === '太原理工大学一号教学楼工程'){
                        return '#a6a2ec ';
                    }
                    else if(type === '山西农大主体育场工程'){
                        return '#FF8C94' ;
                    }
                    return 'pink';
                },
        label: {
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        // 设置柱形图形样式
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
      });

      columnPlot.render();
    },
    async getColumnData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.columnData = res.data;
    },
  },
  created() { },
  async mounted() {
    await this.getColumnData();
    this.loadColumn();
  },
};
</script>
<style scoped></style>